<template>
  <!-- 点菜 -->
  <div class="demo-datetime-picker">
    <div class="pd">
      <button class="butt1" style="margin-right: '20px'" @click="butt1">库存盘点</button> &nbsp;&nbsp;
      <button class="butt1" @click="butt2">盘点详情</button>
    </div>
    <div class="souSuo">
      <span>盘点范围:</span>
      <div class="suo1">
        <span>按仓库:</span>
        <el-select v-model="value" placeholder="全部仓库"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
      </div>
      <!-- 搜索框1 -->
      <div class="suo1">
        <span>按商品:</span>
        <el-select v-model="value" placeholder="商品名称"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>&nbsp;&nbsp;
        <el-select v-model="value" placeholder="请输入名称"> <el-input placeholder="请输入手机号或者卡号" class="tel_input" /></el-select>
      </div>
      <!-- 搜索框2 -->
      <div class="suo1">
        <span>按分类:</span>
        <el-select v-model="value" placeholder="一级分类"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select> &nbsp;&nbsp;
        <el-select v-model="value" placeholder="二级分类"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
      </div>
      <!-- 按钮 -->
      <button class="butt" @click="butt">查询</button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { data1Api, caiApi } from '@/api/api.js'
import { useRouter } from 'vue-router'

import '@/mock/data.js'
import moment from 'moment'

const value = ref('')
const active = ref(0)

const options = ref([])
const router = useRouter()
const butt1 = () => {
  router.push('/home/houqin/kucun/xiangq')
}
const butt2 = () => {
  router.push('/home/houqin/kucun/pand')
}
const getData = async () => {
  const res = await data1Api()

  // tableData.value = res.data.result
}

// 搜索
// const value = () => {
//   getData()
// }
onMounted(() => {
  getData()
})

// 时间戳转换成时间
// 安装 npm install --save moment
// 引入 import moment from 'moment'
// <el-table-column prop="time" label="盘点时间" :formatter="timeToDate" min-width="70" align="center" />
const timeToDate = (row, column) => {
  var date = row[column.property]
  if (date == undefined) {
    return ''
  }
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style lang="less" scoped>
// 搜索
.demo-datetime-picker {
  height: 120px;

  background-color: #fff;
  .pd {
    height: 36px;
    // text-align: center;
    margin-left: 20px;
    line-height: 40px;

    .butt1 {
      height: 30px;
      width: 80px;
      background-color: #ffd000a2;
      border-radius: 4px;
      margin-top: 14px;
      color: #fff;
      border: none;
      font-size: 14px;
    }
  }
  .souSuo {
    display: flex;
    justify-content: space-between;
    padding: 24px 16px;

    span {
      font-size: 16px;
      min-width: 68px;
      margin-top: 8px;
      margin-right: 6px;
    }
    .cai {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
      }
    }
    .suo1 {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
        min-width: 52px;
      }
    }
    .suo2 {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
      }
    }
    // 按钮
    .butt {
      height: 32px;
      width: 80px;
      background-color: #ffd000a2;
      border-radius: 4px;

      color: #f5f5f5;
      border: none;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-table_1_column_2 {
    height: 33px;
  }
}
// 表格
</style>
